<template>
  <common-page title="数据库资产敏感报告详情">
    <div slot="header">
      <el-button
        v-if="!$route.query.id || !$route.query.sessionToken"
        @click="back"
        >返回</el-button
      >
    </div>

    <div class="report-detail" slot="content">
      <div class="detail-top">
        <common-table
          v-loading="tableLoading"
          slot="content"
          :data="databaseList"
        >
          <el-table-column
            label="数据库名称"
            align="left"
            prop="dbName"
            show-overflow-tooltip
          />
          <el-table-column
            label="数据库类型"
            align="left"
            prop="dbType"
            show-overflow-tooltip
          />

          <el-table-column
            label="库名/用户名"
            align="left"
            prop="dbAccount"
            show-overflow-tooltip
          />

          <el-table-column
            label="IP"
            align="left"
            prop="dbIp"
            show-overflow-tooltip
          />
          <el-table-column
            label="端口"
            align="left"
            prop="dbIp"
            show-overflow-tooltip
          />
          <el-table-column
            label="责任人"
            align="left"
            prop="principal"
            show-overflow-tooltip
          />
        </common-table>
      </div>

      <div class="detail-bottom">
        <common-list-tabs>
          <common-tabs slot="tabs" v-model="activeName" @tab-click="changeTabs">
            <el-tab-pane
              v-for="(tab, index) in tabList"
              :label="tab.dbName"
              :name="tab.logId + ',' + tab.dbId + ',' + tab.id"
              :key="index"
            >
            </el-tab-pane>
          </common-tabs>

          <common-table
            v-loading="contentLoading"
            :data="contentList"
            slot="content"
          >
            <el-table-column
              label="表名"
              align="left"
              prop="tableName"
              show-overflow-tooltip
              fixed
            />

            <el-table-column
              label="列名"
              align="left"
              prop="columnName"
              show-overflow-tooltip
            />

            <el-table-column
              label="列备注"
              align="left"
              prop="columnRemark"
              show-overflow-tooltip
            />

            <el-table-column
              label="敏感字段"
              align="left"
              prop="label"
              show-overflow-tooltip
            />

            <el-table-column
              label="识别方式"
              align="left"
              prop="discernType"
              show-overflow-tooltip
            />

            <el-table-column
              label="表行数"
              align="left"
              prop="scanNums"
              width="100"
              show-overflow-tooltip
            />

            <el-table-column
              label="数据分类"
              align="left"
              prop="typeId"
              show-overflow-tooltip
            />

            <el-table-column
              label="数据分级"
              align="left"
              prop="levelId"
              show-overflow-tooltip
            />

            <el-table-column
              label="识别时间"
              align="left"
              prop="disTime"
              width="170"
            />

            <el-table-column
              label="核心数据"
              align="left"
              prop="coreData"
              width="170"
            />

            <el-table-column
              label="识别规则"
              align="left"
              prop="discerRuleName"
              width="170"
            />

            <el-table-column
              label="重要数据"
              align="left"
              prop="impData"
              width="170"
              fixed="right"
            />
          </common-table>
        </common-list-tabs>
      </div>
    </div>
    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getTabList"
    />
  </common-page>
</template>

<script>
import {
  fetchTabList,
  fetchDetailList,
} from "@/api/datascan/dataAssetsReport/index";
import { thirdGansuLogin } from "@/api/login";
import { setTokenEncrypt } from "@/utils/auth";

export default {
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false, // table 加载中
      dialogShow: false,

      databaseList: [],
      contentList: [],
      tableLoading: false,
      contentLoading: false,

      activeName: "",
      tabList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      logId: null,
      dbId: null,
    };
  },
  created() {
    let params = this.$route.query;
    if (params.id && params.sessionToken) {
      this.getAuthentication(params.id, params.sessionToken);
    } else {
      this.getDetailList(this.id);
    }
  },
  methods: {
    getAuthentication(id, sessionToken) {
      thirdGansuLogin({ sessionToken: sessionToken }).then((res) => {
        if (res && res.code === 200) {
          setTokenEncrypt(res.data.token);
          this.getDetailList(id);
        }
      });
    },

    changeTabs(logId, dbId) {
      if (dbId) {
        this.logId = logId;
        this.dbId = dbId;
      } else {
        let data = logId.name.split(",");
        this.logId = data[0];
        this.dbId = data[1];
      }
      this.queryParams.pageNum = 1;
      this.getTabList();
    },
    getDetailList(id) {
      this.tableLoading = true;
      fetchDetailList({ id: id })
        .then((res) => {
          if (res && res.code === 200) {
            this.databaseList = res.data;

            if (res.data && res.data.length > 0) {
              res.data.forEach((item) => {
                this.tabList.push({
                  id: item.id.toString(),
                  dbName: item.dbName,
                  logId: item.logId,
                  dbId: item.dbId,
                });
              });
              this.activeName =
                this.tabList[0].logId +
                "," +
                this.tabList[0].dbId +
                "," +
                this.tabList[0].id;
              this.changeTabs(this.tabList[0].logId, this.tabList[0].dbId);
            }
          }
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },

    getTabList() {
      this.contentLoading = true;
      fetchTabList({ logId: this.logId, dbId: this.dbId, ...this.queryParams })
        .then((res) => {
          if (res && res.code === 200) {
            this.contentList = res.data.dataList;
            this.total = res.data.totalCount;
          } else {
            this.contentList = [];
            this.total = 0;
          }
        })
        .finally(() => {
          this.contentLoading = false;
        });
    },

    back() {
      this.$emit("back");
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .common-page-content {
  padding: 10px;
}

.report-detail {
  overflow: hidden;
  width: 100%;
  height: 100%;
  .detail-top {
    height: 40%;
  }
  .detail-bottom {
    padding-top: 10px;
    box-sizing: border-box;
    height: 60%;
  }
}

::v-deep .global-common-list-tabs-template-container {
  height: 100%;
}

::v-deep .el-table__body-wrapper {
  overflow: scroll !important;
  overflow-x: hidden !important;
}
</style>
